<%@ page import="com.genghis.ptas.statistic.entity.TypeStatistic" %>
<%@ page import="java.util.List" %>
<%--@elvariable id="typeLen" type="java.lang"--%>
<%--@elvariable id="detailStatistic" type="java.util.List"--%>
<%--@elvariable id="user" type="com.genghis.ptas.security.entity.User"--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <%@include file="../../common.jsp" %>

    <!-- BEGIN THEME STYLES -->
    <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME STYLES -->
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>

<!-- BEGIN PIE CHART PORTLET-->
<div class="row" style="width:99%">
    <div class="col-md-6">
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-reorder"></i> 注册课件
                </div>
                <div class="tools">

                    <a href="javascript:" class="reload">
                    </a>
                </div>
            </div>
            <div class="portlet-body">
                <h4>用户课件注册分布</h4>

                <div id="donut" class="chart">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="portlet box red">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-reorder"></i>收藏课件
                </div>
                <div class="tools">

                    <a href="javascript:" class="reload">
                    </a>
                </div>
            </div>
            <div class="portlet-body">
                <h4>用户课件收藏分布</h4>

                <div id="interactive" class="chart">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END PIE CHART PORTLET-->

<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"
        type="text/javascript"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="assets/plugins/flot/jquery.flot.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.stack.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.crosshair.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="assets/scripts/core/app.js"></script>
<script src="assets/scripts/custom/charts.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
</body>
<!-- END BODY -->
</html>
<script type="text/javascript">
    jQuery(document).ready(function () {
        // initiate layout and plugins
        App.init();
        getRegisterTypeDate();
    });

    function getRegisterTypeDate() {
        initPieCharts($("#donut"), 0.5)
    }

    function initPieCharts(id, innerRadius) {
        var dataFormat = [];
        var dataCollectFormat = [];
        <%
        List<TypeStatistic> userAnalysis  = (List<TypeStatistic>)request.getAttribute("userAnalysis");
        for(int i=0 ,len=userAnalysis.size();i<len;i++){
        %>
        dataFormat[<%=i%>] = {
            label: "<%=userAnalysis.get(i).getShowType()%>",
            data: "<%=userAnalysis.get(i).getRegisterNumber()%>"
        };
        dataCollectFormat[<%=i%>] = {
            label: "<%=userAnalysis.get(i).getShowType()%>",
            data: "<%=userAnalysis.get(i).getCollectNumber()%>"
        };
        <%
        }
        %>

        // INTERACTIVE
        $.plot(id, dataFormat, {

            series: {
                pie: {
                    show: true,
                    radius: 1,
                    innerRadius: innerRadius,
                    label: {
                        show: true,
                        radius: 1,
                        formatter: function (label, series) {
                            return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
                        },
                        background: {
                            opacity: 0.5,
                            color: '#000'
                        }
                    }
                }
            },
            grid: {
                hoverable: true,
                clickable: false
            }
        });

        // INTERACTIVE
        $.plot("#interactive", dataCollectFormat, {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    innerRadius: innerRadius,
                    label: {
                        show: true,
                        radius: 1,
                        formatter: function (label, series) {
                            return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
                        },
                        background: {
                            opacity: 0.5,
                            color: '#000'
                        }
                    }
                }
            },
            grid: {
                hoverable: true,
                clickable: false
            }
        });

        id.bind("plothover", pieHover);

        function pieHover(event, pos, obj) {
            if (!obj)
                return;
            percent = parseFloat(obj.series.percent).toFixed(2);
            $("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' (' + percent + '%)</span>');
        }
    }

</script>
